<template>
    <div class="login" clearfix>
      <div class="login-wrap">
        <el-row type="flex" justify="center">
          <el-form ref="loginForm" :model="user" status-icon label-width="80px">
            <h3>注册</h3>
            <hr>
            <el-form-item prop="username" label="用户名">
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item id="password" prop="password" label="密码">
              <el-input v-model="user.password" show-password placeholder="请输入密码 "></el-input>
            </el-form-item>
            <el-form-item id="passwordrpt" prop="passwordrpt" label="重复密码">
                <el-input v-model="user.passwordrpt" show-password placeholder="请重复输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-upload" @click="doRegister()">注册</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </div>
  </template>
   
  <script>
  import axios from "axios";
  export default {
    name: "login",
    data() {
      return {
        user: {
          username: "",
          password: "",
          passwordrpt:""
        }  
      };
    },
    created() {},
    methods: {
        doRegister() {
        if (!this.user.username) {
          this.$message.error("请输入用户名！");
          return;
        } else if (!this.user.password) {
          this.$message.error("请输入密码！");
          return;
        } else if (!this.user.password) {
          this.$message.error("请重新输入密码！");
          return;
        } else if (this.user.password!==this.user.passwordrpt){
          this.$message.error("前后密码输入不一致");
        }else if (this.user.password.length<8){
          this.$message.error("密码小于8位，请重新输入");
        }
        else {
          const that=this;
          axios
            .post("http://localhost:8084/register", {
              username: this.user.username,
              password: this.user.password
            })
            .then(function(resp){
              if(resp.data === 'successinsert'){
                that.$router.push({ path: "/" });
              }else if(resp.data === 'dupuser'){
                that.$message.error("该用户名已经被占用！");
              }
              else{
                that.$message.error("注册失败");
              }
            });
        }
      }
    }
  };
  </script>
   
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .login {
    width: 100%;
    height: 100%;
    background: url("@/assets/login.png") no-repeat;
    background-size: cover;
    overflow: hidden;
  }
  .login-wrap {
    background: url("@/assets/loginbox.png") no-repeat;
    background-size: cover;
    position: relative;
    opacity:0.95;
    width: 400px;
    height: 360px;
    margin: 215px auto;
    overflow: hidden;
    padding-top: 10px;
    line-height: 40px;
    border-radius: 18px;
  }
  #password {
    margin-bottom: 5px;
  }
  h3 {
    color: #0babeab8;
    font-size: 24px;
  }
  hr {
    background-color: #444;
    margin: 20px auto;
  }
  a {
    text-decoration: none;
    color: #aaa;
    font-size: 15px;
  }
  a:hover {
    color: #0babeab8;
  }
  .el-button {
    width: 80%;
    margin-left: -50px;
  }
  </style>